<template>
  <div class="notice">
    <div class="left">
      <!--    公告-->
      <p style="font-size: 20px;font-weight: bold">往期公告</p>
      <div class="announcement" style="display: flex">

        <!--        管理员公告-->
        <div class="notice_left" style="width: 40%;margin: 10px">
          <p style="font-size: 15px;font-weight: bold">管理员</p>
          <p v-for="i in content_admin">
            <el-tag style="margin-bottom: 15px">{{ i.createTime }}</el-tag>
            <br/>
            {{ i.content }}
            <el-divider/>
          </p>
        </div>

        <!--        教师公告-->
        <div class="notice-right" style="width: 40%;margin: 10px">
          <p style="font-size: 15px;font-weight: bold">教师</p>
          <p v-for="i in content_teacher">
            <el-tag style="margin-bottom: 15px">{{ i.createTime }}</el-tag>
            <br/>
            {{ i.content }}
            <el-divider/>
          </p>
        </div>
        <div class="create" style="width: 20%;margin: 10px">
          <!--        发布公告-->
          <el-button type="warning" @click="dialogVisible = true">发布公告</el-button>
        </div>

        <el-dialog
            v-model="dialogVisible"
            title="编辑公告"
            width="70%"
            :before-close="handleClose"
        >
          <el-form :model="form" label-width="120px">
            <el-form-item label="公告内容">
              <el-input v-model="form.content" type="textarea"/>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">退出</el-button>
        <el-button type="primary" @click="announce">
          发布
        </el-button>
      </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ElMessageBox} from 'element-plus'
import {ref, reactive, onMounted, Ref} from "vue";
import axios from "axios";
import NoticeTeacher from "@/class/NoticeTeacher";
import {CourseStore, userStore} from "@/store";

const current = ref(1)
const coursestore = CourseStore()
const userstore = userStore()
//初始化
const form: Ref<NoticeTeacher> = ref<NoticeTeacher>({
  id: "",
  courseId: coursestore.course_id,
  teacherId: userstore.teacher_id,
  content: ""
})
const form1: Ref<NoticeTeacher> = ref<NoticeTeacher>({
  id: "",
  courseId: coursestore.course_id,
  teacherId: userstore.teacher_id,
  content: ""
})

// 读取管理员公告
const content_admin = ref([])
const load_admin_notice = () => {
  axios.get('/NoticeAdmin/all')
      .then(function (res) {
        content_admin.value = res.data.data
      })

}
// 读取教师公告
const content_teacher = ref([])
const load_teacher_notice = async () => {
  axios.get('/tcnotice/all')
      .then(function (res) {
        content_teacher.value = res.data.data
        // current.value = val
      })

}
onMounted(async () => {
  load_admin_notice()
  load_teacher_notice()
})
// 新增公告
const announce = async () => {
  dialogVisible.value = false
  await
      axios.post('/tcnotice/teacheraddNotice', form.value)
          .then(function (res) {
            load_teacher_notice()
            console.log(res.data)
            form1.value = {
              id: "",
              courseId: "",
              teacherId: "",
              content: ""
            }
          })
}

//取消新增
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('您确定公告已经保存？')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
const onSubmit = () => {
  console.log('submit!')
}

</script>

<style scoped>
.outline {
  justify-content: space-between;
  display: flex;
  margin-top: 30px;
}

.left {
  width: 70%;
  margin-left: 40px;
}

.stime {
  padding: 8px 20px;
  background: #F8F8F8;
  margin-bottom: 10px;
  margin-top: 15px;
  overflow: hidden;
  justify-content: space-between;
  display: flex;
}

.el-button--warning {
  margin-right: 10px;
  width: 140px;
  height: 44px;
  font-size: large;
  background-image: linear-gradient(#FF7E00, #FF6C00);
  border-color: #EF6502;
  border-bottom: 1px solid #b25900;
}

.video {
  background: #F8F8F8;
  margin-right: 20px;
  width: 20%;
  margin-top: 10px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
